<!--左侧列表-->
<script setup>
import {ArrowDown, Avatar, Bicycle, Location, OfficeBuilding, QuartzWatch, Setting} from "@element-plus/icons-vue";
import {computed, onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import {useStore} from "vuex";


// 激活的路径
let activePath = ref('')
// 获取路由参数对象
let route = useRoute()

// 计算激活菜单路径
const computeActivePath = () => {
  // 获取当前路由的路径 ,/dashboard/user , /dashboard/user/detail/9 ,/dashboard/user/detail/xx/xxx/9
  let templatePath = route.path
  // 将获取当前路由的路径通过“/”进行分隔，/dashboard/user -> ["",“dashboard”,“user”] , /dashboard/user/detail/9 -> ["","dashboard","user","detail","9"]
  let pathArr = templatePath.split("/")
  // 判断分隔后路径数组的长度
  if (pathArr.length > 3) {
    activePath.value = "/" + pathArr[1] + "/" + pathArr[2];
  } else {
    activePath.value = templatePath;
  }
}


// 获取用户信息 vuex
const store = useStore();
const loginUser = computed(() => store.state.loginUser);

onMounted(()=>{
  computeActivePath()
})
</script>

<template>
  <el-menu
      active-text-color="blue"
      text-color="black"
      background-color="darkseagreen"
      :default-active="activePath"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      :router="true"
  >
    <el-sub-menu :index="index" v-for="(menu,index) in loginUser.menuList ">
      <template #title>
        <el-icon><component :is="menu.icon"/></el-icon>
        <span>{{ menu.name }}</span>
      </template>
      <el-menu-item :index="childMenu.url" v-for="childMenu in menu.chileMenuPermissionList">
        <template #title>
          <el-icon><component :is="childMenu.icon"/></el-icon>
          <span>{{ childMenu.name }}</span>
        </template>
      </el-menu-item>
    </el-sub-menu>
<!--
    <el-sub-menu index="1">
      <template #title >
        <el-icon><Shop /></el-icon>
        <span>市场活动</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/index/activity">
          <template #title>
            <el-icon><Goods /></el-icon>
            <span>市场活动</span>
          </template>
        </el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>


    <el-sub-menu index="2">
      <template #title>
        <el-icon><Briefcase /></el-icon>
        <span>线索管理</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/index/clue">
          <template #title>
            <el-icon><ShoppingBag /></el-icon>
            <span>线索管理</span>
          </template>
        </el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>


    <el-sub-menu index="3">
      <template #title>
        <el-icon><Avatar /></el-icon>
        <span>客户管理</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/index/customer">
          <template #title>
            <el-icon><Phone /></el-icon>
            <span>客户管理</span>
          </template>
        </el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>


    <el-sub-menu index="4">
      <template #title>
        <el-icon><UserFilled /></el-icon>
        <span>用户管理</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/index/user">
          <template #title>
           <el-icon><User /></el-icon>
            <span>用户管理</span>
          </template>
        </el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
-->




  </el-menu>


</template>

<style scoped>

</style>